<template>
  <div :style="{ width: '100%' }">
    <a-calendar class="fullcalendar" :fullscreen="false" v-model="value" @change="onPanelChange" >
      <template  slot="dateFullCellRender" slot-scope="value1">
        <span>
          <a-badge status="success" class="calendar-badge" v-if="isHasTodo[getDateFormat(value1,'YYYY-MM-DD')]" :text="getDateFormat(value1,'DD')" />
          <span class="calendar-text" v-else>{{getDateFormat(value1,'DD')}}</span>
        </span>
      </template>
    </a-calendar>
    <div class="work-content-box">
      <template v-for="(item,i) in data">
        <div v-if="item.type === 6" class="work-item" :key="i">
          <span class="time-item ellipsis">{{item.startTime}}</span>
          <span class="content-item">
            <!-- <a-badge status="success" :text="item.title" /> -->
            <span class="ellipsis">{{item.record}}</span>
          </span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  name: 'TodoWork',
  data() {
    return {
      data: [],
      url: {
        schedule: '/sys/schedule/listAll'
      },
      value: '',
      todoList: []
    }
  },
  computed: {
    isHasTodo() {
      const todoObj = {}
      this.todoList.forEach(item => {
        if (item.time) {
          if (item.type === 6) {
            const key = moment(item.time).format('YYYY-MM-DD')
            todoObj[key] ? todoObj[key].push(item) : todoObj[key] = [item]
          }
        }
      })
      return todoObj
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    onPanelChange() {
      this.loadData()
    },
    loadData() { // 根据日期请求对应的日程
      const params = {
        userId: this.userInfo().username,
        time: moment(this.value).format('YYYY-MM-DD')
      }
      getAction(this.url.schedule, params).then(res => {
        if (res.success) {
          this.data = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getMonthsData() {
      const yearAndMonth = moment(this.value).format('YYYY-MM')
      const params = {
        userId: this.userInfo().username,
        startTime: yearAndMonth + '-01',
        endTime: yearAndMonth + '-' + this.lastDay
      }
      getAction(this.url.schedule, params).then(res => {
        if (res.success) {
          this.todoList = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // getTodoList(list) { // 把请求回的数据按日期转换为对象
    //   this.todoList = {}
    //   list.forEach(item => {
    //     if (item.planTime) {
    //       const key = moment(item.planTime).format('YYYY-MM-DD')
    //       this.todoList[key] ? this.todoList[key].push(item) : this.todoList[key] = [item]
    //     }
    //   })
    // },
    getDateFormat(value, format) {
      return moment(value).format(format)
    },
    setStartAndEndTime(date) { // 获取当月开始日期和结束日期
      const current = new Date(date)
      const year = current.getFullYear()
      const month = current.getMonth() + 1
      this.yearAndMonth = year + '-' + month
      this.lastDay = new Date(year, month, 0).getDate()
    }
  },
  mounted() {
    this.value = moment(new Date())
    this.getMonthsData()
    this.$nextTick(() => {
      this.loadData()
    })
  }
}
</script>
<style >
  .fullcalendar .ant-fullcalendar-cell{
    text-align: center;
  }
  .calendar-badge,.calendar-text{
    cursor: pointer;
  }
  .fullcalendar .ant-badge-status-text{
    margin-left: 0px;
  }
  .calendar-badge .ant-badge-status-text,.calendar-badge span,.calendar-text{
    padding: 3px;
  }
  .ant-fullcalendar-selected-day .calendar-badge .ant-badge-status-text,.ant-fullcalendar-selected-day .calendar-text{
    color: #fff;
    background: #1890ff;
  }
</style>
<style scoped>
/* 内容列表 */
.work-content-box {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  padding: 0px 10px;
  max-height: 200px;
  overflow-y: auto;
}
.work-item {
  display: grid;
  grid-template-columns: 1.5fr 4.5fr;
  height: 40px;
  line-height: 40px;
}
.work-item i {
  color: #7682a8;
}
.work-item .time-item {
  margin-right: 20px;
  color: #7682a8;
  font-size: 14px;
}
.work-item .content-item {
  color: #424e5c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor:pointer;
}
</style>
